<template>
	<!-- 标题 -->
	 <h2 class="m-title">购物车</h2>
	<div>
		<div class="g-goods-item" v-for="item in cartList" :key="item.id">
			<div>
				<input type="checkbox" style="margin-right: 5px; height: 100%" />
				<img
					:src="item.url"
					alt="1"
				/>
			</div>
			<div class="g-goods-right">
				<h2 class="m-good-name ellipsis">{{item.name}}</h2>
				<p class="ellipsis">{{item.description}}</p>
				<div
					class="g-input-wrapper"
					style="display: flex; justify-content: space-between; align-items: center; margin-top: 10px"
				>
					<p>{{item.price}}￥</p>
					<!-- 计数器组件y-inputnumber -->
					<div class="y-inputnumber">
						<input type="button" value="-" @click="bindPlus(item.id,'minus')"/>
						<input type="text" :value="item.num" />
						<input type="button" value="+" @click="bindPlus(item.id,'add')">
					</div>
				</div>
				<!-- 计数器组件y-inputnumber -->
			</div>
		</div>
	</div>
</template>

<script setup>
import axios from 'axios'
import {ref,onMounted} from 'vue'

const cartList = ref([])
const getCartList = ()=>{
    axios({
        url:'http://localhost:3000/carts',
        method:'GET'
    }).then(res=>{
        const data = res.data
        if(data.code == 1){
            cartList.value = data.list
			console.log('item ',cartList.value);
			
        }
    })
}

/**
 * 数量操作
 */
const bindPlus = (id,type)=>{
	console.log('id ',id);
	
	axios({
        url:'http://localhost:3000/cart/'+id,
        method:'PUT',
		data:{
			type:type
		}
    }).then(res=>{
	})
}

 onMounted(() => {
    getCartList()
 })


</script>

<style lang="css" scoped>
.m-title{
	height: 40px;
	text-align: center;
	background-color: #f5f7fa;
	font-size: 18px;
	line-height: 40px;
}
.y-inputnumber {
	width: 72px;
	height: 20px;
	display: flex;
	border: 1px solid #dcdfe6;
	border-radius: 5px;
	overflow: hidden;
}

.y-inputnumber:hover {
	border: 1px solid #c1c2c5;
}

.y-inputnumber input:first-of-type {
	width: 22px;
	height: 22px;
	border: none;
	font-size: 14px;
	color: #939598;
	background-color: #f5f7fa;
	cursor: pointer;
}

.y-inputnumber input:nth-child(2) {
	width: 26px;
	height: 22px;
	border-left: 1px solid #dcdfe6;
	border-right: 1px solid #dcdfe6;
	border-top: none;
	border-bottom: none;
	text-align: center;
	cursor: pointer;
}

.y-inputnumber input:last-of-type {
	width: 22px;
	height: 22px;
	border: none;
	font-size: 14px;
	color: #939598;
	background-color: #f5f7fa;
	cursor: pointer;
}


.g-goods-item {
	box-sizing: border-box;
	display: flex;
	border-radius: 8px;
	background-color: white;
	margin: 5px 10px;
	padding: 10px;
}
 .g-goods-item img {
	width: 100px;
	height: 100px;
	margin-right: 10px;
}
 .g-goods-item .g-goods-right {
	flex: 1;
	text-align: left;
}

.g-goods-item .g-goods-right h2 {
	font-size: 18px;
}

.g-goods-item .g-goods-right .ellipsis {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-webkit-line-clamp: 1; /* 显示3行文本 */
}
</style>
